<template>
	<view class="eventDetails" @click="isShowShare = false">
		<!-- 事件详情 操作 -->
		<navBar :title="'应急抢险'" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
		<!-- <TertiaryTitle :dataObj="dataObj" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></TertiaryTitle> -->
		<view class="share">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 0 40rpx 30rpx 40rpx;">
				<view class="title-box">
					<view class="main-title">{{ dataObj.bizProjectName || "" }}</view>
					<view class="sub-title">{{ dataObj.sectionName || "" }}、{{ dataObj.siteName || "" }}</view>
					<view class="title-time">{{ dataObj.startTime2 }}</view>
				</view>
				<image class="share-image" src="/static/image/homePage/share.png" mode=""
					@click.stop="isShowShare = !isShowShare"></image>
			</view>
			<view class="shareBox" v-if="isShowShare">
				<view class="triangle"></view>
				<view class="share-item" @click.stop="getSituatuinShare">
					险情情况填报外链
				</view>
				<view class="share-item" @click.stop="getTeleconferenceShare">
					远程会商邀请外链
				</view>
				<view class="share-item" @click.stop="getRecordsShare">
					处置记录填报外链
				</view>
				<view class="share-item" @click.stop="pushMessage"
					v-show="buttonPrivileges.includes('app_button_push_data')">
					数据推送给业主
				</view>
			</view>
		</view>

		<view class="bgc"></view>

		<view class="content">
			<view class="operation">
				<view class="img-item" @click.stop="getSituation">
					<image class="image" src="/static/image/homePage/situation.png"></image>
					<view class="name">上报险情情况</view>
				</view>
				<view class="img-item" @click.stop="getDispatch">
					<image class="image" src="/static/image/homePage/dispatchSheet.png"></image>
					<view class="name">进入资源调度</view>
				</view>
				<view class="img-item" @click.stop="dispatchRecords">
					<image class="image" src="/static/image/homePage/dispatchRecords.png"></image>
					<view class="name">上传处置记录</view>
				</view>
				<view class="img-item" @click.stop="getTeleconference">
					<image class="image" src="/static/image/homePage/Teleconference.png"></image>
					<view class="name">进入远程会议</view>
				</view>
			</view>

			<view class="info">
				<view class="info-item" @click.stop="lookDispatchSheet">
					<view class="name">查看资源调度</view>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				<view class="info-item" @click.stop="materialLocation">
					<view class="name">查看物资位置</view>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				<view class="info-item" @click.stop="lookDisposalRecords">
					<view class="name">查看处置记录</view>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				<view class="info-item" @click.stop="lookLiveVideo">
					<view class="name">查看现场视频</view>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				<view class="info-item" @click.stop="lookEngineeringData">
					<view class="name">查看工程资料</view>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
			</view>
		</view>
		<view class="callBox" @click="toSelectPeople" v-if="buttonPrivileges.includes('app_button_voice_call')">
			<!-- <u-icon size="30" name="phone-fill" color="#2f80ed"></u-icon> -->
		</view>
		<!-- <view class="fixedButton">
			<u-button type="primary" :loading="loading" :throttleTime="2000" text="抢险结束"
				@click="getEventEnd"></u-button>
		</view> -->
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button :loading="loading" @click="getEventEnd" throttleTime="2000" class="button-primary">抢险结束</button>
			</view>
		</view>
		<view>
			<u-modal :buttonReverse="true" :show="showMoal" :title="'提示'" :showCancelButton="true" @confirm="fnConfirm"
				@cancel="fnCancel">
				<view class="slot-content">
					是否确定推送给业主?
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import TertiaryTitle from "./components/tertiaryTitle.vue"
	import {
		getToken
	} from '@/utils/auth'
	import {
		getEventSummarySave,
		getEventEnd,
		eventSetReportFlag
	} from "@/api/emergency/emergencyDispatch.js"
	import {
		getEqReturnWarehouseOneButton
	} from "@/api/device/deviceOut.js"
	import {
		getTreeByNameByLike
	} from "@/api/emergency/polling.js"
	import {
		mapGetters
	} from "vuex"
	export default {
		name: "eventDetails",
		components: {
			TertiaryTitle
		},
		computed: {
			...mapGetters(['buttonPrivileges']),
			...mapGetters(['privileges'])
		},
		data() {
			return {
				isShowShare: false,
				loading: false,
				dataObj: {}, // 接收传过来的数据
				showMoal: false,
				isSure: false,
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on("setData", (data) => {
				this.dataObj = data.data
				uni.setStorageSync("diapatch-title", JSON.stringify(data.data))
			})
			if (option.isShow) {
				let data = uni.getStorageSync("diapatch-title")
				this.dataObj = JSON.parse(data)
			}

		},
		methods: {
			// 跳转到上报险情情况
			getSituation() {
				uni.navigateTo({
					url: "/subpackage-emergency/pages/reportEmergency" + "?eventId=" + this.dataObj.id,
					success: (res) => {
						res.eventChannel.emit('setData', {
							data: this.dataObj
						})
					}
				})

				this.isShowShare = false
			},

			// 跳转到资源调度中
			getDispatch() {
				uni.navigateTo({
					url: `/subpackage-emergency/pages/resourceScheduling?eventId=${this.dataObj.id}&isRehearsal=${this.dataObj.isRehearsal}`,
					success: (res) => {
						res.eventChannel.emit('setData', {
							data: this.dataObj
						})
					}
				})

				this.isShowShare = false
			},

			// 上传处置记录
			dispatchRecords() {
				uni.navigateTo({
					url: "/subpackage-emergency/pages/report" + "?eventId=" + this.dataObj.id,
					success: (res) => {
						res.eventChannel.emit('setData', {
							data: this.dataObj
						})
					}
				})

				this.isShowShare = false
			},

			// 跳转远程会议
			getTeleconference() {
				let userName = this.$store.getters.userName.name || "游客"
				console.log(userName, this.dataObj);
				uni.navigateTo({
					url: `/subpackage-emergency/pages/meeting?roomId=${this.dataObj.conferenceRoomId||""}&userName=${userName}`,
				})

				this.isShowShare = false
			},

			// 查看物资位置
			materialLocation() {
				uni.navigateTo({
					url: `/subpackage-emergency/pages/suppliesLocation?id=` + this.dataObj.id,
				})

				this.isShowShare = false
			},

			// 查看处置记录
			lookDisposalRecords() {
				uni.navigateTo({
					url: `/subpackage-emergency/pages/disposalRecords?id=` + this.dataObj.id,
				})

				this.isShowShare = false
			},

			// 查看现场视频
			lookLiveVideo() {
				uni.navigateTo({
					url: `/subpackage-emergency/pages/liveVideo?videoType=0&id=` + this.dataObj.id,
				})

				this.isShowShare = false
			},

			// 查看工程资料
			async lookEngineeringData() {
				// 项目名称
				let porjectName = this.dataObj.bizProjectName
				// 标段名称
				let areaName = this.dataObj.sectionName
				// 工点名称
				await this.getTreeByNameByLike(this.dataObj.siteId)
				let siteRow = null
				if (this.findList && this.findList.length > 0) {
					siteRow = this.findList[0]
				}
				let siteRow2 = JSON.stringify(siteRow)
				console.log(siteRow2, '000');
				uni.navigateTo({
					url: `/subpackage-emergency/pages/inspection/projectFileList?porjectName=${porjectName}&areaName=${areaName}&siteRow=${siteRow2}&workName=${this.dataObj.siteName}`
				})

				this.isShowShare = false
			},

			// 获取项目列表
			async getTreeByNameByLike(siteId) {
				console.log(siteId);
				this.findList = []
				let res = await getTreeByNameByLike({})
				res.result.forEach(item => {
					if (item.list && item.list.length > 0) {
						item.list.forEach(item2 => {
							if (item2.list && item2.list.length > 0) {
								item2.list.forEach(item3 => {
									if (item3.id === siteId) {
										this.findList.push(item3)
									}
								})
							}
						})
					}
				})
			},

			// 查看资源调度
			lookDispatchSheet() {
				uni.navigateTo({
					url: `/subpackage-emergency/pages/lookDispatchSheet?eventId=${this.dataObj.id}`
				})

				this.isShowShare = false
			},

			// 上报险情外链 
			getSituatuinShare() {
				let projectId = uni.getStorageSync("isOwner") || ""
				let value = this.$config.SHARE_URL +
					`?token=${getToken()}&id=${this.dataObj.id}&projectId=${projectId}&page=updateDanger&time=${Date.now()}`
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
				this.isShowShare = false
			},

			// 会议外链
			getTeleconferenceShare() {
				let value =
					`${this.$config.SHARE_URL}?token=${uni.getStorageSync("token")}&eventId=${this.dataObj.id||''}&projectId=${uni.getStorageSync("isOwner")}&page=eventDetail&time=${Date.now()}`
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: function success() { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						});

					}
				});
				this.isShowShare = false
			},

			// 处置记录外链
			getRecordsShare() {
				let value =
					`${this.$config.SHARE_URL}?token=${uni.getStorageSync("token")}&eventId=${this.dataObj.id||''}&projectId=${uni.getStorageSync("isOwner")}&page=uploadRecords&time=${Date.now()}`
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: function success() { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						});

					}
				});
				this.isShowShare = false

			},
			//数据推送
			pushMessage() {
				if (this.dataObj.isReportFlag || this.isSure) {
					// this.isShowShare = false
					return uni.showToast({
						title: '已上报!',
						icon: 'none',
						mask: true
					})
				}
				this.showMoal = true
			},
			fnConfirm() {
				eventSetReportFlag({
					id: this.dataObj.id
				}).then(res => {
					console.log(res, 'res');
					if (res.status === 1 && res.success) {
						uni.showToast({
							title: '推送成功',
							icon: 'success',
							mask: true
						})
						this.showMoal = false
						this.isShowShare = false
						this.isSure = true
					}
				})
			},
			fnCancel() {
				this.showMoal = false
				this.isShowShare = false
			},
			// 抢险结束
			getEventEnd() {
				this.loading = true
				uni.showModal({
					title: '提示',
					content: '抢险结束?',
					success: (res) => {
						if (res.confirm) {
							let _query = {
								eventId: this.dataObj.id,
								state: 1,
							}
							getEventEnd(_query).then(val => {
								this.loading = false
								if (val.success) {
									this.$message("保存成功")
									if (val.result.eqExWarehouseCode) {
										this.getDeviceReturn(val.result.eqExWarehouseCode)
									} else {
										uni.switchTab({
											url: "/pages/homePage/homePage"
										})
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							this.loading = false
						}
					}
				});
			},

			// 返回上一级
			goBack(url) {
				uni.switchTab({
					url: url
				})
			},

			// 设备是否全部归还
			getDeviceReturn(code) {
				uni.showModal({
					title: '提示',
					content: '是否归还全部设备?',
					success: (res) => {
						if (res.confirm) {
							getEqReturnWarehouseOneButton({
								codes: code
							}).then(val => {
								if (val.success) {
									this.$message("保存成功")
									uni.switchTab({
										url: "/pages/homePage/homePage"
									})
								}
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: "/pages/homePage/homePage"
							})
							console.log('用户点击取消');
						}
					}
				});
			},

			toSelectPeople() {
				console.log(this.dataObj)
				uni.navigateTo({
					url: `/subpackage-emergency/pages/selectPeople?eventId=${this.dataObj.id}&projectCascade=${this.dataObj.projectCascade}&startTime=${this.dataObj.startTime}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.eventDetails {
		position: relative;
		height: 100%;
		width: 100%;

		.share {
			/* #ifdef MP-WEIXIN */
				padding-top: 190rpx;
			/* #endif */
			position: relative;
			.share-image {
				width: 60rpx;
				height: 60rpx;
			}


		}

		.bgc {
			height: 30rpx;
			background: #F5F7FA;
		}

		.content {
			/* #ifdef MP-WEIXIN */
				padding-bottom: 80rpx;
			/* #endif */
			.operation {
				padding: 30rpx 20rpx;
				padding-bottom: 10rpx;
				display: flex;
				flex-wrap: wrap;
				width: calc(100% - 40rpx);
				justify-content: space-between;

				.img-item {
					position: relative;
					flex: 1;
					text-align: center;
					margin-bottom: 20rpx;
					cursor: pointer;

					.image {
						width: 328rpx;
						height: 174rpx;
					}

					.name {
						position: absolute;
						top: 96rpx;
						right: 30rpx;
						color: #fff;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}

			.info {
				padding: 0rpx 32rpx;

				.info-item {
					display: flex;
					align-items: center;
					padding: 0rpx 38rpx;
					height: 100rpx;
					line-height: 100rpx;
					border-bottom: 2rpx solid #E2E5ED;
					cursor: pointer;

					.name {
						flex: 1;
						font-size: 32rpx;
						font-weight: 400;
						color: #445469;

					}
				}
			}
		}
	}

	.title-box {
		flex: 1;
		font-size: 36rpx;
		font-family: Noto Sans Thai UI-Medium, Noto Sans Thai UI;
		font-weight: 500;
		color: #1B1A57;

		.main-title {
			width: 610rpx;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; //溢出则不换行
		}

		.sub-title {
			color: #4F5E7B;
			font-size: 24rpx;
			width: 610rpx;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; //溢出则不换行
		}

		.title-time {
			color: #4F5E7B;
			font-size: 24rpx;
			width: 610rpx;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; //溢出则不换行
		}
	}
	.shareBox {
		position: absolute;
		/* #ifdef MP-WEIXIN */
			top: 295rpx;
			right: 16rpx;
		/* #endif */
		/* #ifdef APP-PLUS  || H5 */
			top: 120rpx;
			right: 20rpx;
		/* #endif */

		width: 306rpx;
		background: rgba(68, 84, 105, 0.9000);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		z-index: 10;

		.triangle {
			position: absolute;
			top: -40rpx;
			right: 26rpx;
			width: 0;
			height: 0;
			border: 20rpx solid;
			border-color: transparent transparent #565c5f transparent;
		}

		.share-item {
			line-height: 80rpx;
			height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
		}

		.share-item:hover {
			color: #ffa000;
		}

		
	}
	.callBox {
		position: fixed;
		right: 50rpx;
		bottom: 200rpx;
		width: 60px;
		height: 60px;
		background: url('../static/voiceCall.png') no-repeat center/100%;
	}
</style>
<style>
	page {
		height: 100%;
		width: 100%;
	}

	body {
		width: 100%;
		height: 100%;
	}
</style>